<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 这个div最终会被template对应的dom元素替换 -->
  <div id="app"></div>

  <!-- 直接在页面中编写模板(template)  template配置的语法糖 -->
  <div id="app2">
    <p>{{ msg }}</p>
  </div>

  <!-- 1. 引入vue库 -->
  <script src="../js/vue.js"></script>
  <script>
    // 2. 创建Vue的实例
    new Vue({
      // 指定用于显示动态界面的根元素
        // 方式一: 指定对应的选择器
        // 方式二: 指定对应的元素对象
      // el: '#app',
      el: document.getElementById('app2'),
      // data: 指定可变的N个数据
        // 方式一: 包含属性数据的对象
        // 方式二: 返回包含数据的对象的函数
      // data: {
      //   msg: 'Hello Atguigu!'
      // },
      data () {
        return {
          msg: '你好, 硅谷!'
        }
      },

      // template: 用来指定要显示的界面
      // template的值: 包含了HTML和vue语法的字符串 ==> 统一称为: vue模板, 简称: 模板
      // 它会替换掉页面中的el元素, 而不是插入  ==>意味着不能给el元素添加样式
      // 缺点: 编写过程没有提示, 代码没有高亮 => 不太方便编写和阅读
      // 解决: 直接在页面中编写模板: 由html和vue语法组成字符串
          // 内部: 编译模板生成虚拟DOM => 生成真实DOM
      // template: `
      // <div>
      //   <p>{{ msg }}</p>  
      // </div>
      // `
    })
  </script>
</body>
</html>